import React from 'react'
import {Button, Col, List, Row, Tag} from 'antd';
import {UserDirectoryPage} from './UserDirectoryPage'
import  API from '../../api/api'
import {Link} from "react-router-dom";
import {DownloadOutlined} from '@ant-design/icons';
import IconFont6 from "../../util/autoIcon/folder";
import IconFont from "../../util/autoIcon/article";
import IconFont2 from "../../util/autoIcon/file";
import LayoutPreview from "../Layout/LayoutPreview";
import './Index.css'
var downLoadIcon = <DownloadOutlined/>;
let config = require("../../util/config").config
let getModule = [];

export class Title extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            section: this.props.section,
            list: []
        }
    }

    render() {
        let color = this.props.color;
        if(this.props.type=="manage"){
            return (
                <Link to={ `${this.props.render.moduleUrl}`}>
                    <Button type="primary" style={{marginRight:"1rem",marginBottom:"1rem"}} size={'large'} >
                        {this.props.render.moduleName}
                    </Button>
                </Link>
            )
        }else {
            return (
                <UserDirectoryPage layoutType={this.props.layoutType} layoutArea={this.props.layoutArea} count={this.props.count} width={this.props.width} type={this.props.type} render={this.props.render} ></UserDirectoryPage>
            )
        }
    }
}

export default class DirectoryPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    layoutParams = null

    flag = false;

    obj = null;

    columns = [
        {
            title: '文件名称',
            dataIndex: 'FILE_NAME',
            key: 'name',
            render: (text,record) => {
                let type;
                // 1、判断 record.type是否为 config.folder_d 、config.file_d 或者 config.folder
                if(record.FILE_TYPE === config.folder){
                    return <Link to={`/eip/table/folder&${record.key}`}><IconFont6 type="icon-huabanfuben"/>&nbsp;{text}</Link>
                }else {
                    if(record.FILE_TYPE===config.article){
                        type = "article"
                    }else {
                        type = "file"
                    }
                    return <Link to={`/eip/file/${type}/${record.key}`}>{type=="article" ? <IconFont type="icon-wendangwenjian"/> : <IconFont2 type="icon-tupian" />}&nbsp;{text}</Link>
                }
            }
        },
        {
            title: '文件类型',
            dataIndex: 'FILE_TYPE',
            key: 'type'
        },
        {
            title: "创建时间",
            dataIndex: 'CREATE_DATE',
            key: 'createTime'
        },
        {
            title: "修改时间",
            dataIndex: 'UPDATE_DATE',
            key: 'updateTime'
        },
        {
            title: "状态",
            dataIndex: 'TOP_STATUS',
            key: 'status',
            width:100,
            render:(text) => {
                if(text=='Y'){
                    return <Tag color="#f50">置顶</Tag>
                    // return <IconFont7 id={"top"} type="icon-zhiding"/>
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'Options',
            key: 'Options',
            render: (text,record) => (
                <div>
                    {/*<Button type="primary" shape="round" icon={preIcon}*/}
                    {/*        style={{marginRight: "1rem", border: "0.1rem solid #ff7875"}} danger>*/}
                    {/*    收藏*/}
                    {/*</Button>*/}
                    {record.FILE_TYPE!=config.folder ?
                        <Button type="primary" shape="round" icon={downLoadIcon} size="middle" onClick={_ => API.downloadFile(record.key,record.FILE_TYPE)}>
                            附件下载
                        </Button>
                        :
                        null
                    }
                </div>
            ),
        },
    ]

    getMenuList(){
        return API.getResourceLib(this.props.id);
    }

    getObjsByList=(count,list,layoutType,layoutArea,width)=>{
        let tmp,obj=[]
        for(let i = 0;i < list.length;i++){
            if(list[i]==undefined || list[i]==null){
                continue
            }
            tmp = (
                // <Col span={layoutType!="1"? 24 : (list.length >2 ? 8 : list.length==2 ? 12 : list.length==1 ? 24 : null)} style={{marginBottom:"1rem"}}>
                <Col span={24} style={{marginBottom:"1rem"}}>
                    {

                        list[i].moduleType != "page"
                            ?
                            <Title  key={list[i].moduleId} count={list.length} type={list[i].moduleType == "file-d" ? "file" : (list[i].moduleType == "article-d" ? "article" : null)} layoutType={layoutType} layoutArea={layoutArea} width={width} render={list[i]} />
                            :
                            <div className="module-content" style={{marginRight:"-1rem"}} dangerouslySetInnerHTML={{__html:list[i].moduleContent }}></div>
                    }
                </Col>
            )
            obj.push(tmp)
        }
        return(
            <div className="card-container" >
                <Row gutter={27} style={{marginRight:"1rem"}} children={obj} />
                {/*<Row gutter={27} style={{overflow:"auto",marginRight:"1rem"}} children={obj} />*/}
            </div>
        )
    }

    renderByLayoutType=()=>{
        let obj=[],arr,list=[]
        //调用接口
        arr = this.getMenuList();
        this.resourceLibCount = arr.count
        console.log("Component DirectoryPage DirectoryPage directories getMenuList",arr)
        //文件库 或者 文章库 数目 == 0
        if(arr.count==0 ){
            obj = <List style={{width:"98.5%",marginLeft:"0"}}/>
            list.push(obj)
        }
        //文件库 或者 文章库 数目 == 1
        // if(arr.count==1){
        //     obj1 = <Table columns={this.columns} dataSource={arr.list[0].fileArr}  scroll={{ y: 600 }}/>
        // }
        //文件库数目 或者 文章库数目 >0
        else {
            list.push(this.getObjsByList(arr.count,arr.list1,arr.layoutType,1,this.layoutParams.PARAMS.width_1))
            if(arr.layoutType=="2" || arr.layoutType=="3" || arr.layoutType=="4"){
                list.push(this.getObjsByList(arr.count,arr.list2,arr.layoutType,2,this.layoutParams.PARAMS.width_2))
                if(arr.layoutType=="3" || arr.layoutType=="4"){
                    list.push(this.getObjsByList(arr.count,arr.list3,arr.layoutType,3))
                    if(arr.layoutType=="4"){
                        list.push(this.getObjsByList(arr.count,arr.list4,arr.layoutType,4))
                    }
                }
            }
        }
        return list
    }

    renderManageButton=()=>{
        let color;
        let tmp=null;
        let obj=[];
        let tmpArr = JSON.parse(sessionStorage.getItem("getAdminModule"))
        let manageNode = tmpArr.filter(item=>item.moduleParentId==0)[0]
        let routes = JSON.parse(sessionStorage.getItem("getAdminModule")).filter(item => item.moduleParentId == manageNode.moduleId)
        for(let i = 0;i < routes.length;i++){
            color = "#40b7c1a6"
            tmp = <Title key={routes[i].moduleUrl} render={routes[i]} type={"manage"} color={color} section={routes[i].name} />
            obj.push(tmp)
        }
        return obj
    }

    directories =()=>{
        //1、如果this.props.type == "module"
        if(this.props.type == "module"){
            return this.renderByLayoutType()
        }
        //2、如果this.props.type == "manage"
        else{
            return this.renderManageButton()
        }
    }

    getLayout=()=> {
        if(this.props.moduleType=="folder" && this.props.id!="0"){
            this.layoutParams=API.getLayout("folder-d",this.props.id);
        }
    }

    render() {
        console.log("DirectoryPage的props对象：",this.props)
        this.getLayout();
        getModule = JSON.parse(sessionStorage.getItem("getModule"))
        let obj = this.directories()
        // if(!this.flag){
        //     this.flag=!this.flag;
        //     this.obj
        //     obj = this.obj
        // }else {
        //     obj = this.obj
        // }

        return (
            <div>
                {/*{this.directories()}*/}

                {/*<LayoutPreview id={this.props.id} type1="module" params={{...this.layoutParams.PARAMS}} type={this.layoutParams.LAYOUT_TYPE} useWay="userPage" children={this.directories()}></LayoutPreview>*/}

                {
                    this.props.moduleType=="folder" && this.props.id!="0"?
                        this.resourceLibCount>0?
                            <LayoutPreview id={this.props.id} params={{...this.layoutParams.PARAMS}} type={this.layoutParams.LAYOUT_TYPE} useWay="userPage" children={obj}></LayoutPreview>
                            :
                            obj
                        :
                        obj
                }
            </div>
        )
    }
}


